<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>综合实战</title>
  <link rel="stylesheet" type="text/css" href="css3.css">
</head>
<body>

<div class="mainBox">
  <h3>标准--怪异盒子</h3>
  <p>
    <div class="hezi">
      <div class="xuezi">
            
      </div>
    </div>
    <br/>
    <div class="hezi2">
      <div class="xuezi2">
            
      </div>
    </div>
 </p>
</div>
<div class="mainBox">
  <h3>水平分栏</h3>
  <p>
     <div class="flex">
      <img src="meitu.jpg" width="100">
      如何让你遇见我在我最美丽的时刻为这我已在佛前求了五百年求佛让我们结一段尘缘佛於是把我化做一棵树
      长在你必经的路旁阳光下慎重地开满了花朵朵都是我前世的盼望当你走近请你细听那颤抖的叶是我等待的热情
    </div>
  </p>
</div>
<div class="mainBox">
  <h3>排序(flex)</h3>
  <p>
     <div class="sort"> 
         <div class="frist">第一个</div>
         <div class="secend">第二个</div>
         <div class="three">第三个</div>
     </div>
  </p>
</div>


<div class="mainBox">
    <h3>图片居中属性(旧版)</h3>
    <p>
    <div class="center">
        <img src="meitu.jpg" />
    </div>
    </p>
</div>
  
</body>
</html>

